<template>
  <!-- 详情页主容器 -->
  <div class="seeDetails">
    <!-- 使用Element Plus卡片组件展示详情内容 -->
    <el-card class="detail-card">
      <template #header>
        <div class="card-header">
          <!-- 文章标题 -->
          <h1 class="title">{{ detailList.title }}</h1>
        </div>
      </template>
      <!-- 文章信息：分类、浏览量、发布时间 -->
      <div class="detail-info">
        <span class="category">{{ detailList.typeName }}</span>
        <span class="views">{{ detailList.pageViews }}浏览</span>
        <span class="time">{{ detailList.pastHours }}小时前</span>
      </div>

      <!-- 文章正文内容 -->
      <div class="article-content">
        <p>
          {{ detailList.article }}
        </p>
      </div>
    </el-card>
  </div>
</template>

<script setup>
/**
 * 详情页组件
 * 用于展示文章或新闻的详细信息
 */
import { getshowHeadlineDetail } from "../../api/index"
import { ref, onMounted } from "vue"
import { useRoute } from 'vue-router'

// 获取路由信息对象，用于获取查询参数
const route = useRoute() 

// 响应式数据，存储详情页数据
const detailList = ref({}) 

/**
 * 获取详情页数据
 * 通过路由参数hid调用API获取文章详情
 * @async
 * @function getDetailList
 * @returns {Promise<void>}
 */
const getDetailList = async () => {
  // 调用API获取文章详情数据
  let result = await getshowHeadlineDetail(route.query.hid)
  // 将获取到的数据赋值给detailList
  detailList.value = result.headline
}

// 页面挂载完成后执行数据获取
onMounted(() => {
  getDetailList()
})
</script>

<style lang="less" scoped>
.seeDetails {
  width: 1200px;
  margin: 20px auto;
  padding: 0 20px;

  .detail-card {
    border-radius: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    :deep(.el-card__header) {
      background-color: #f8f9fa;
      border-bottom: 1px solid #e9ecef;
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        font-size: 24px;
        color: #333;
        margin: 0;
        font-weight: 600;
      }
    }

    .detail-info {
      margin: 20px 0;
      padding: 15px;
      background-color: #f8f9fa;
      border-radius: 5px;

      span {
        padding-right: 20px;
        font-size: 14px;
        color: #6c757d;

        &.category {
          color: #4dabf7;
          font-weight: 500;
        }

        &.views {
          color: #868e96;
        }

        &.time {
          color: #adb5bd;
        }
      }
    }

    .article-content {
      padding: 20px 0;

      p {
        font-size: 16px;
        line-height: 1.8;
        color: #2b2e30;
        white-space: pre-wrap;
      }
    }
  }
}
</style>